<template>
	<view class="index_box">
		<view class="banner_box">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="2000" duration="500" indicator-color="#999999"
			 indicator-active-color="#FFCD00">
				<swiper-item v-for="(item ,index) in bannerArr" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="attractions_box">
			<view class="block1">
				<view class="tit text-ellipsis-2">
					<view class="tag dis_il">{{productDetail.productTypeName}}</view><text class="dis_il">{{productDetail.productName}}</text>
				</view>
				<!-- <view class="type">({{productDetail.productSubtitle}})</view> -->
				<view class="type text-ellipsis-1">{{productDetail.productSubtitle}}</view>
				<!-- <view class="type text-ellipsis-1">特色：丽江  五彩滩   喀纳斯湖  魔鬼城</view> -->
				<view class="type text-ellipsis-1">成团人数：{{productDetail.minPeople}}-{{productDetail.maxPeople}}人</view>
				<view class="dis_fx fx_column fx_center">
					<!-- <view class="price" ><view class="tag">成人</view>￥{{productDetail.minPrice}}元~{{productDetail.maxPrice}}元</view>
					<view class="price"><view class="tag">儿童</view>￥{{productDetail.minChildPrice}}元~{{productDetail.maxChildPrice}}元</view> -->
					<view class="price">
						<view class="tag">成人：</view>
						<view class="text">￥<text>{{productDetail.minPrice || "0.00"}}</text>元起</view>
					</view>
					<view class="price">
						<view class="tag">儿童：</view>
						<view class="text">￥<text>{{productDetail.minChildPrice || "0.00"}}</text>元起</view>
					</view>
					<!-- <view class="integral text_right">200积分</view> -->
				</view>
				<view class="share_btn">分享有礼</view>
				<!-- <view class="prompt">下尊敬的T1会员，下单出行后本商品返200乐兔币/人分享给新用户，其下单后您可再获得首单奖励100乐兔币/人</view> -->
			</view>
			<view class="block2">
				<view id="selectPackage" class="tit dis_fx fx_between fx_column" v-if="packages && packages.length>0">
					<text>选择：套餐类型</text>
					<view class="more dis_fx fx_column"><text>更多>></text></view>
				</view>
				<view class="items type_item" v-if="packages && packages.length>0">
					<scroll-view scroll-x="true">
						<view class="item" :class="item.cur" v-for="(item, index) in packages" :key="index" @click="tabPackage(index)">{{item.productMinPersons}}-{{item.productMaxPersons}}人拼团<view
							 class="type"></view>
						</view>
					</scroll-view>
				</view>
				<view class="tit dis_fx fx_between fx_column" @click="toorderConfirmStep2('/pages/order/orderConfirmStep2/orderConfirmStep2?productId='+productId+'&startDate='+startDate)"
				 v-if="productDetail.spec && productDetail.spec.length>0">
					<text>选择：日期</text>
					<view class="more dis_fx fx_column"><text>更多>></text></view>
				</view>
				<view class="items" @click="toorderConfirmStep2('/pages/order/orderConfirmStep2/orderConfirmStep2?productId='+productId+'&startDate='+startDate)"
				 v-if="productDetail.spec && productDetail.spec.length>0">
					<scroll-view scroll-x="true">
						<view class="item cur" v-for="(item, index) in productDetail.spec" :key="index">
							<text>{{item.date}} {{item.week}}</text>
							<view class="price">成￥{{item.productPrice || "0.00"}}起</view>
							<view class="price">童￥{{item.childrenPrice || "0.00"}}起</view>
							<view class="price">余{{item.productStock || 0}}</view>
							<!-- <view class="type"></view> -->
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="block3" v-if="orders && orders.length>0">
				<view class="tit dis_fx fx_between fx_column" @click="toNewPage('/pages/assemble/assemble?productId='+productId)"><text>旅友拼团区</text>
					<view class="more dis_fx fx_column"><text>更多拼团</text>
						<view class="icon"></view>
					</view>
				</view>
				<view class="item dis_fx fx_between fx_column" v-for="(item,index) in orders" :key="index">
					<view class="item_text dis_fx">{{item.tripDate}}日出行，已拼<view class="cur_text">{{item.adultQty || 0}}</view>人<view
						 class="price">￥{{item.amount}}</view>
					</view>
					<view class="btn" @click="toAssemble(item.tripDate,item.maxQty-item.adultQty)">拼团</view>
				</view>
			</view>
			<view class="video_box" v-if="showVideo == 1">
				<!-- <swiper display-multiple-items="3" circular interval="4000" duration="1000"
				 indicator-color="#999999" indicator-active-color="#FFCD00" @change="videoChange"> -->
				<swiper previous-margin="70px" next-margin="70px" circular interval="400" duration="1000"
				 indicator-color="#999999" indicator-active-color="#FFCD00" @change="videoChange">
					<swiper-item v-for="(item ,index) in videoUrls" :key="index" :class="index == videoCurrent?'cur':''" v-if="item && item.length>10">
						<video :src="item" :id="index == videoCurrent?'videoId':''" :show-center-play-btn="disable"
						 :enable-progress-gesture="disable" class="coverImg" preload="load" initial-time='1.5'></video>
						<cover-image class="controls-play img" v-if="videoIcon" @click="play" src="../../static/play.png"></cover-image>
					</swiper-item>
				</swiper>
			</view>
			<view class="tab_box">
				<view class="tab_tit" :class="fixed">
					<view @click="tabDetail('prid')" class="tabd" :class="detailId=='prid'?'active':''">产品详情</view>
					<view @click="tabDetail('schedulees')" class="tabd" :class="detailId=='schedulees'?'active':''">行程明细</view>
					<view v-for="(item,index) in  productDetail.modules" class="tabd" :class="detailId=='a'+item.id?'active':''"
					 @click="tabDetail('a'+item.id)">{{item.name}}</view>
				</view>
				<view class="tab_con">
					<view id="prid" class="block4" v-html="productDetail.productDetails"></view>
					<!-- 行程 -->
					<view class="block4" id="schedulees" v-if="productDetail.schedulees && productDetail.schedulees.length>0">
						<view class="block_tit"><image src="../../static/logo_s.png"></image>行程明细</view>
						<view class="xc_box" v-for="item in productDetail.schedulees">
							
							<view class="tit"><text>D{{item.scheduleeDay}}</text>{{item.scheduleeTitle}}</view>
							
						    <view>{{item.scheduleeExplain}}</view>
							
							<view class="list" v-if="item.details" v-for="detail in item.details">
								<view class="tit_h dis_ib ver_m fz_0"><image :src="detail.icon" class="dis_ib ver_m"></image><text class="dis_ib ver_m">【{{detail.scheduleeResourceName}}】</text>
								</view>
								<!-- <view class="dis_fx fx_column">
									<view class="time" v-if="detail.scheduleeTimes==1">上午</view>
									<view class="time" v-if="detail.scheduleeTimes==2">下午</view>
									<view class="time" v-if="detail.scheduleeTimes==3">晚上</view> -->
									<!-- <view class="mdd">目的地：云南</view>
									<view>餐食：早餐</view> -->
								<!-- </view> -->
								<!-- <view class="jd">{{detail.scheduleeResourceTypeName}}：{{detail.scheduleeResourceName}}</view> -->
								<view v-html="detail.scheduleeResourceValue"></view>
								<!-- <view class="text">丽江古城是一座美丽的古城。拥有悠久的历史。那啥啥的风景。此处根据后台勾选资源的展示情况判断是否展示。比如早餐一般就不会展示</view>
								<view class="imgs fz_0">
									<image src="../../static/empty.png" mode="aspectFit"></image><image src="../../static/empty.png" mode="aspectFit"></image><image src="../../static/empty.png" mode="aspectFit"></image>
								</view> -->
							</view>
						</view>
					</view>
					<view :id="'a'+item.id" class="block4" v-for="(item,index) in  productDetail.modules">
						<view class="block_tit"><image src="../../static/logo_s.png"></image>{{item.name}}</view>
						<view v-html="item.content"></view>
					</view>
				</view>
			</view>
			<!-- <view class="block5">
				<view class="tit dis_fx fx_between fx_column"><text>图片展示</text></view>
				<view class="fz_0">
					<image src="../../static/test3.png"></image>
				</view>
				<view class="fz_0">
					<image src="../../static/test3.png"></image>
				</view>
			</view>
			<view class="prompt">
				<view class="prompt_tit">退款政策：</view>
				<text>1拼团成功后，如需申请退款，需根据实际情况补偿包括但不限于车费/房费等差额。特殊情况下，无法退款</text>
			</view> -->
			<!-- 评论 -->
			<view class="comment_box">
				<view class="tit cf">
					<view class="tit fl">客户评价</view>
					<view class="fr more">查看更多评价（{{productDetail.count || 0}}）</view>
				</view>
				<view class="con" v-if="comments && comments.length>0" v-for=" item in comments">
					<view class="cf">
						<view class="name fl">{{item.username}}</view>
						<view class="date fr">{{item.createTime}}</view>
					</view>
					<view class="text">{{item.contents}}</view>
					<view class="imgs fz_0">
						<image :src="imsrc" mode="aspectFit" v-for=" imsrc in item.imgs" v-if="imsrc"></image>
						<image src="../../static/empty.png" mode="aspectFit" v-else></image>
					</view>
				</view>
			</view>
		</view>
		<!-- share -->
		<view class="share" @click="showShare"></view> 
		<!-- btns -->
		<view class="bottom_btns">
			<view class="contact dis_fx fx_column fx_center" @click="toNewPage('/pages/customer/customer')">
				<view class="icon"></view><text>联系客服</text>
			</view>
			<view class="buy" @click="buyNow()">立即购买</view>
		</view>
		<!-- 提现提示弹框 -->
		<view class="dialog_box sure_dialog" :class="shareShow">
			<view class="dialog_con">
				<view class="dialog">
					<view class="dis_fx fx_column fx_center_column prompt">
						<text>分享邀请好友一起出行，还可以</text>
						<text>获得奖励哦！</text>
					</view>
					<view class="btns dis_fx fx_center">
					<!-- 	<view class="btn">生成海报</view> -->
						<view class="btn sub" @click="showDirectShare">直接分享</view>
					</view>
				</view>
				<view class="close_btn" @click="closeShare"></view>
			</view>
		</view>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module')
	// jweixin.config()
	import util from '../../common/util.js'
	import wxShare from '../../common/wxShare.js'
	export default {
		data() {
			return {
				fixed: "",
				scroll: '',
				shareShow: 'hide',
				productId: '',
				productDetail: {}, // 产品详情
				searchWord: '',
				bannerArr: [],
				spec: [], // 规格列表
				orders: [],
				comments: [], //评价列表
				targetAddress: [],
				hotTravel: [],
				detailId: 'prid',
				productConfig: {}, //产品规格
				startDate:"",
				videoCurrent: 0, //当前视频
				// videoUrls: ['https://www.mzywx.com/Uploads/Video/1500327771_zybg.mp4','https://www.mzywx.com/Uploads/Video/1500327771_zybg.mp4','https://www.mzywx.com/Uploads/Video/1500327771_zybg.mp4'], //视频列表
				videoUrls: [], //视频列表
				showVideo: 0,
				packages: [], //套餐列表
				disable: false,
				videoCtx: '',
				packageId:"",
				productPackagePrice:0,
				productChildrenPackagePrice: 0,
				videoIcon:true
			}
		},
		onLoad(option) {
			// 获取产品id			
			if (option.productId) {
				this.productId = option.productId
				this.getProductDetail(option.productId)
				this.getDatas();
				// this.getSpecList(option.productId)									
			} else {
				uni.showModal({
					content: '路径错误',
					showCancel: false
				});
			}
			
			if(option.reffent){
				var reffent = option.reffent;
				uni.setStorageSync('reffent', reffent); //保存分享人id 为后面授权登录时绑定推荐人			
			}
			
		
			
		},
		watch: {
			scroll: function() {
				var that = this;
				that.loadSroll()
			}
		},
		mounted() {
			window.addEventListener('scroll', this.dataScroll);
			this.videoCtx = uni.createVideoContext('videoId');
		},
		methods: {
			//切换套餐
			tabPackage(index) {
				var that = this;
				var packages = that.packages;
				for (var i in packages) {
					if (i == index) {
						packages[i].cur = "cur";
						that.packageId=packages[i].id;
						that.productPackagePrice=packages[i].productPackagePrice;
						that.productChildrenPackagePrice=packages[i].productChildrenPackagePrice;
					} else {
						packages[i].cur = "";
					}
				}
				that.packages = []
				that.packages = packages
			},
			//跳转到选择日期页面
			toorderConfirmStep2(url) {
				var that = this;
				var cur = ""
				url=url+"&packageId="+that.packageId+"&productPackagePrice="+that.productPackagePrice+"&productChildrenPackagePrice="+that.productChildrenPackagePrice
				var packages = that.packages;
				for (var i in packages) {
					if (packages[i].cur == "cur") {
						cur = "cur"
					}
				}
				if (cur == "cur") {
					uni.navigateTo({
						url: url
					})
				} else {
					uni.showToast({
						title: "请选择套餐类型",
						icon: "none"
					})
				}
			},
			//跳转到锚点
			tabDetail(tab) {
				this.detailId = tab
				var anchor = this.$el.querySelector("#" + tab)
				uni.pageScrollTo({
					scrollTop: anchor.offsetTop-50,
					duration: 10
				});
// 				document.documentElement.scrollTop = anchor.offsetTop
			},
			dataScroll: function() {
				this.scroll = document.documentElement.scrollTop || document.body.scrollTop ;
			},
			loadSroll: function() {
				var that = this;
				var navs = document.getElementsByClassName("block4");
				for (var i = navs.length - 1; i >= 0; i--) {
					var oftp = navs[i].offsetTop-50
					if (that.scroll + 1 >= oftp) {
						var asd = navs[i].id;
						that.detailId = asd;
						that.fixed = "fixed"
						break;
					} else {
						that.fixed = ""
					}
				}
			},
			//拼团
			toAssemble(tripDate, maxPeople) {
				var that = this;
				let dailyprice = 0;
				let childrenPrice = 0;
				let spec = that.productConfig.spec;
				let productSingleRoomDifference = 0;

				console.log(spec);

				for (var i in spec) {
					let spe = spec[i]
					if (spe.date == tripDate) {
						if (spe.productPrice) {
							dailyprice = spe.productPrice
						}
						if (spe.childrenPrice) {
							childrenPrice = spe.childrenPrice;
						}

						if (spe.productSingleRoomDifference) {
							productSingleRoomDifference = spe.productSingleRoomDifference;

						}
					}
				}
				let url = '/pages/order/orderConfirm/orderConfirm?productId=' + that.productId + "&price=" + that.dailyprice +
					"&outDate=" + tripDate + "&childrenPrice=" + that.childrenPrice + "&roomPriceDifference=" + that.productSingleRoomDifference +
					"&insurancePrice=" + that.productConfig.insurancePrice + "&maxPeople=" + maxPeople

				uni.navigateTo({
					url: url
				})
			},
			//加载规格数据
			getDatas() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				});
				var that = this
				util.fetchPost('/api/product/getProductConfig', {productId: that.productId}, function(res) {
					console.log(res)
					that.productConfig = res.data
					if(res.data && res.data.spec && res.data.spec.length>0){
						that.startDate=res.data.spec[0].date
					}
					uni.hideLoading();
				}, function() {}, false)
			},

			//直接分享
			directShare() {
				var that = this;
				var param = {
					title: that.productDetail.productName,
					imgUrl: that.productDetail.productMasterDiagram.split(",")[0],
					desc: that.productDetail.productSubtitle
				}
				wxShare.share(param, "");
				
				
			},
			
			showDirectShare() {
				var that = this;
				that.closeShare()
				uni.showModal({
					content: '请点击上方使用微信自带分享',
					showCancel: false
				});
			}
			
			
			,
			//显示分享弹窗
			showShare() {
				this.shareShow = ""
			},
			//关闭分享弹窗
			closeShare() {
				this.shareShow = "hide"
			},
			toNewPage(url) {
				uni.navigateTo({
					url
				});
			},
			buyNow() {
				var that = this;
				var cur = ""
				var packages = that.packages;
				for (var i in packages) {
					if (packages[i].cur == "cur") {
						cur = "cur"
					}
				}
				if(cur=="cur"){
					if(that.productDetail.spec && that.productDetail.spec.length>0){
						uni.navigateTo({url: '/pages/order/orderConfirmStep2/orderConfirmStep2?productId='+that.productId+"&packageId="+that.packageId+"&productPackagePrice="+that.productPackagePrice+"&productChildrenPackagePrice="+that.productChildrenPackagePrice});
					}else{
						uni.showToast({
							title:"无可出行时间",
							icon:"none"
						})
					}
				}else{
					uni.showToast({
						title: "请选择套餐类型",
						icon: "none"
					})
					var anchor = this.$el.querySelector("#selectPackage")
					uni.pageScrollTo({
						scrollTop: anchor.offsetTop,
						duration: 10
					});
					// document.documentElement.scrollTop = anchor.offsetTop
				}

			},
			getProductDetail(id) {
				var _self = this
				util.fetchPost('/api/product/getProductDetails', {
					productId: id
				}, function(res) {
					console.log(res)
					_self.productDetail = res.data
					if (_self.productDetail.productMasterDiagram) {
						_self.bannerArr = _self.productDetail.productMasterDiagram.split(",")
					}
					let orders = res.data.orders
					if (orders && orders.length > 0) {
						for (let i in orders) {
							orders[i].tripDate = util.formatDate(new Date(orders[i].tripBeginDate), "yyyy-MM-dd")
						}
						_self.orders = orders;
					}
					let comments = res.data.comments;
					if (comments && comments.length > 0) {
						for (let i in comments) {
							comments[i].createTime = util.formatDate(new Date(comments[i].created), "yyyy-MM-dd")
							if (comments[i].files) {
								comments[i].imgs = comments[i].files.split(",")
							}
						}
						_self.comments = comments;
					}
					_self.showVideo = res.data.showVideo;
					let videoUrls = res.data.videoList;
					// console.log(res.data.videoList)
					if (videoUrls && videoUrls.length > 0) {
						if (videoUrls.length == 1) {
							videoUrls.push(videoUrls[0], videoUrls[0]);
						} else if (videoUrls.length == 2) {
							videoUrls.push(videoUrls[0]);
							// console.log(2)
						}
						_self.videoUrls = videoUrls;
					}
					let packages = res.data.packages;
					if (packages && packages.length > 0) {
						_self.packages = packages;
					}
					
				_self.directShare();
					
				}, function(err) {

				}, false)
			},
			// 视频样式
			videoChange(e) {
				this.videoCurrent = e.detail.current
				this.videoIcon = true
			},
			play(event) {
				this.videoCtx.play();
				this.videoIcon = false
			}
		}
	}
</script>

<style>
	.video_box {
		background: #E6E6E6;
		border-radius: 0!important;
		height: 230upx !important;
		padding: 20upx 0;
		width: 750upx;
		padding: 20upx 24upx;
		margin: 50upx 0 50upx -24upx;
		box-shadow: 0 15upx 15upx 1upx rgba(0,0,0,0.12);
		/* background: rgba(0,0,0,0.1);*/
	}

	.video_box swiper-item {
		position: relative;
		top: 18upx;
		box-sizing: border-box;
		opacity: 0.5;
	}

	.video_box swiper-item {
		/* width: 300upx!important;
		margin-left: -150upx; */
		height: 154upx !important;
	}

	.video_box swiper-item.cur {
		height: 190upx !important;
		transition: all .2s ease-in 0s;
	}

	.video_box swiper-item.cur {
		top: 0;
		opacity: 1;
		position: relative;
	}

	.video_box cover-image {
		position: absolute;
		width: 54upx;
		height: 54upx;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		display: none;
	}

	.video_box swiper-item.cur cover-image {
		display: block;
	}

	/* .video_box swiper-item.cur:after{
		content: '';
		width: 54upx;
		height: 54upx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background: url() no-repeat center/54upx
	} */
	.tit_s image{
		width: 30upx;
		height: 30upx;
	}
	.tit_s text{
		color: #F95719;
		margin-left: 20upx;
	}
	.tit_h{
		margin-top: -6upx;
	}
	.tit_h image{
		width: 30upx;
		height: 30upx;
	}
	.tit_h text{
		color: #000;
		margin: 0 10upx;
		font-weight: 600;
		font-size: 14px;
	}
	page {
		background: #fafafa;
	}
	.block_tit{
		font-size: 14px;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20upx 0;
	}
	.block_tit image{
		width: 40upx;
		height: 40upx;
		margin-right: 20upx;
	}
	.xc_box .tit {
		color: #000;
		font-weight: 600;
		font-size: 14px;
		
	}
	.xc_box .tit text{
		margin-right: 20upx;
		display: inline-block;
	}

	.xc_box .list {
		color: #707070;
		font-size: 28upx;
		margin-bottom: 50upx;
	}

	.xc_box .list .time {
		color: #FFFFFF;
		background: #FFC800;
		width: 73upx;
		height: 46upx;
		border-radius: 23upx;
		text-align: center;
		margin-right: 30upx;
	}

	.xc_box .list .mdd {
		margin-right: 70upx;
	}

	.xc_box .list .jd {
		margin: 35upx 0 25upx;
	}

	.xc_box .list .text {
		color: #BBBBBB;
		font-size: 24upx;
		line-height: 40upx;
		margin-bottom: 15upx;
	}
    .comment_box{
		margin-top: 50upx;
	}
	.comment_box .name {
		color: #555;
	}

	.comment_box .date {
		color: #ddd;
	}

	.comment_box .text {
		margin: 20upx 0;
	}

	.comment_box .imgs image,
	.xc_box .list .imgs image {
		width: 210upx;
		height: 180upx;
		margin-right: 37upx;
		display: inline-block;
		border: 1px solid #eee;
		box-sizing: border-box;
	}

	.comment_box .imgs image:last-child,
	.xc_box .list .imgs image:last-child {
		margin-right: 0;
	}

	.tab_box .tab_tit.fixed {
		position: fixed;
		top: 80upx;
		left: 0;
		width: 100%;
		background: #fff;
		padding: 0 10px;
		z-index: 3;
	}

	.tab_box .tab_tit {
		overflow-x: scroll;
		height: 100upx;
		white-space: nowrap;
	}

	.tab_box .tab_tit .tabd {
		flex: 1;
		text-align: center;
		height: 100upx;
		line-height: 100upx;
		display: inline-block;
		/* width: 25%; */
		padding: 0 15upx;
		margin: 25upx 25upx 0;
		color: #BBBBBB;
		height: 50upx;
		line-height: 50upx;
	}

	.tab_box .tab_tit .tabd.active {
		color: #333333;
		background: #EAEAEA;
		border-radius: 25px;
	}

	.active {
		color: #007AFF;
	}

	.banner_box {
		padding: 20upx
	}

	.index_box swiper,
	.index_box swiper image {
		width: 100%;
		height: 354upx;
		border-radius: 15upx;
	}

	.attractions_box {
		padding: 0 24upx 200upx;
	}

	.attractions_box .block1 .tit {
		line-height: 1.7;
	}

	.attractions_box .block1 .tit .tag {
		background: #FC5C1D;
		color: #fff;
		font-size: 21upx;
		padding: 0 20upx;
		border-radius: 16upx;
		text-align: center;
		display: inline-block;
		margin-right: 20upx;
	}

	.attractions_box .block1 .tit text {
		color: #313131;
		font-size: 30upx;
	}

	.attractions_box .block1 .type {
		font-size: 24upx;
		color: #707070;
		line-height: 1.5;
	}

	.attractions_box .block1 .price {
		font-size: 30upx;
		color: #333333;
		display: flex;
		align-items: center;
		margin: 0 20upx;
	}

	.attractions_box .block1 .integral {
		color: #ffc302;
		font-size: 15upx;
		position: absolute;
		right: 20upx;
		/* margin: 10upx 0; */
	}

	.attractions_box .block1 .price .tag {
		color: #707070;
		font-size: 15upx;
		/* background: #F5F5F5;
		width: 60upx;
		height: 34upx;
		text-align: center;
		line-height: 34upx;
		border-radius:17upx;
		margin-right: 10upx; */
	}

	.attractions_box .block1 .price .text {
		color: #fc5c1e;
		display: flex;
		align-items: center;
		font-size: 22upx;
	}

	.attractions_box .block1 .price .text text {
		font-size: 41upx;
		font-family: 'priceFont';
	}

	.attractions_box .block1 .prompt {
		color: #FC5C1D;
		font-size: 24upx;
		margin-top: 20upx;
	}

	.attractions_box .block1 .share_btn {
		font-size: 23upx;
		color: #313131;
		margin: 35upx auto;
		display: block;
	}

	.attractions_box .block2 {
		box-shadow: 0 0 18upx 0 rgba(106, 79, 13, 0.12);
		padding: 16upx;
		margin-top: 50upx;
	}
	
	.attractions_box .block2 .tit{
		margin-bottom: 10upx;
	}
	
	.attractions_box .block2 .tit>text {
		font-size: 23upx;
		font-weight: normal;
		color: #313131;
	}
	.attractions_box .tit>text {
		color: #333333;
		font-size: 32upx;
		font-weight: 600;
	}

	.attractions_box .tit .more {
		color: #fd5c1e;
		font-size: 23upx;
	}

	.attractions_box .tit .more .icon {
		background: url() no-repeat center/contain;
		width: 12upx;
		height: 26upx;
		margin-left: 10upx;
	}

	.attractions_box .block2 .items {
		overflow: hidden;
		width: auto;
		white-space: nowrap;
		font-size: 0;
	}

	.attractions_box .block2 .type_item {
		margin-bottom: 50upx;
	}

	.attractions_box .block2 .type_item .item {
		font-size: 23upx;
		color: #888888;
		background: #eaeaea;
		width: 160upx;
		margin-right: 10upx;
		height: 50upx;
		line-height: 50upx;
		padding: 0;
	}

	.attractions_box .block2 .item {
		display: inline-block;
		width: 170upx;
		font-size: 24upx;
		color: #999999;
		border: 1px solid #EAEAEA;
		margin-right: 20upx;
		padding: 10upx 0;
		text-align: center;
		border-radius: 10upx;
		position: relative;
		overflow: hidden;
	}

	.attractions_box .block2 .item:last-child {
		margin-right: 0;
	}

	.attractions_box .block2 .item.cur .type {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		background: url() no-repeat center/contain;
		width: 39upx;
		height: 39upx;
	}

	.attractions_box .block2 .item.cur {
		background: #F0F0F0;
		border-color: #F0F0F0;
	}

	.attractions_box .block2 .item.cur .type {
		display: block;
	}

	.attractions_box .block3 {
		margin-top: 50upx;
	}

	.attractions_box .block3 .item {
		border-bottom: 1px solid #EAEAEA;
		padding: 30upx 0;
		font-size: 28upx;
		color: #757575;
		line-height: 28upx;
	}

	.attractions_box .block3 .item:last-child {
		border-bottom: 0 none;
	}

	.attractions_box .block3 .item .price {
		color: #C1C1C1;
		padding-left: 20upx;
		border-left: 1px solid #999999;
		margin-left: 20upx;
	}

	.attractions_box .block3 .item .btn {
		width: 120upx;
		height: 50upx;
		background: #FFC800;
		color: #fff;
		font-size: 28upx;
		text-align: center;
		line-height: 50upx;
		border-radius: 25upx;
	}

	.attractions_box .block4 {
		line-height: 2;
		font-size: 12px;
		color: #666
	}
	
	.attractions_box .block4 video {
		width: 100%;
	}

	.attractions_box .block5 image {
		width: 100%;
		height: 300upx;
		border-radius: 10upx;
		margin-bottom: 30upx;
	}

	.attractions_box .prompt .prompt_tit {
		font-size: 28upx;
		color: #333333;
	}

	.attractions_box .prompt text {
		font-size: 24upx;
		color: #757575;
	}

	.share {
		background: url() no-repeat center/contain;
		width: 90upx;
		height: 90upx;
		position: fixed;
		right: 10upx;
		bottom: 300upx;
	}

	.bottom_btns {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		z-index: 3;
	}

	.bottom_btns .contact {
		width: 240upx;
		color: #fff;
		background: #FC5C1D;
		height: 100%;
		font-size: 28upx;
	}

	.bottom_btns .contact .icon {
		width: 31upx;
		height: 32upx;
		background: url() no-repeat center/contain;
		margin-right: 10upx;
	}

	.bottom_btns .buy {
		height: 100%;
		width: 510upx;
		background: #FFC800;
		color: #333333;
		font-size: 36upx;
		text-align: center;
	}

	.sure_dialog .prompt text {
		font-size: 32upx;
		color: #333;
	}

	.sure_dialog .btns .btn {
		width: 240upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		border: 1px solid #FFC800;
		text-align: center;
		color: #FFC800;
		font-size: 32upx;
		margin-top: 60upx;
	}

	.sure_dialog .btns .btn.sub {
		background: #FFC800;
		color: #fff;
		/* margin-left: 80upx; */
	}

	.share_btn {
		background: url(../../static/share_icon.png) no-repeat center/contain;
		width: 152upx;
		height: 38upx;
		line-height: 38upx;
		padding-left: 48upx;
		font-size: 22upx;
		color: #313131;
	}
</style>
